<template>
    <transition name="dialog-fade">
        <div class="xiaoquan-dialog_wrapper" v-show="visible">
            <div class="xiaoquan-dialog" :style="{ width: width, marginTop: top }">
                <div class="xiaoquan-dialog_header">
                    <slot name="title">
                        <span class="xiaoquan-dialog_title">{{ title }}</span>
                    </slot>
                    <button class="xiaoquan-dialog_headerbtn" @click="clickHandle">
                        <XiaoQuan-Icon icon="xmark"></XiaoQuan-Icon>
                    </button>
                </div>
                <div class="xiaoquan-dialog_body">
                    <slot></slot>
                </div>
                <div class="xiaoquan-dialog_footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script setup>
    import propsObj from "./props";
    defineOptions({
        name: "XiaoQuan-Dailog"
    });
    const props = defineProps(propsObj);
    const emit = defineEmits(['close'])
    const clickHandle = ()=> {
        emit('close');
    }
</script>

<style scoped lang="scss">

</style>